<template>
  <div class="pages-container">
    <!-- 搜索框 Or 工具框 -->
    <a-form class="pages-tools-box" :form="form" @submit="getSearch">
      <a-row :gutter="[15, 10]">
        <a-col :span="4">
          <a-form-item>
            <a-input
              allowClear
              placeholder="服务商名称"
              v-decorator="['title']"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">搜索</a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset"
            >清空</a-button
          >
          <a-button :style="{ marginLeft: '8px' }" @click="add">新增</a-button>
        </a-col>
      </a-row>
    </a-form>

    <!-- 表格 -->
    <div class="pages-content">
      <a-table
        :columns="columns"
        :data-source="data"
        :pagination="false"
        rowKey="id"
        :loading="tableLoading"
      >
        <a-space slot="avater" slot-scope="row">
          <img
            :src="row.image"
            style="max-width: 40px; max-height: 40px"
            @click="lookPhoto(row.image)"
          />
        </a-space>
        <a-space slot="certImage" slot-scope="row">
          <img
            :src="row.certImage"
            style="max-width: 40px; max-height: 40px"
            @click="lookPhoto(row.certImage)"
          />
        </a-space>
        <a-space slot="cert" slot-scope="row">
          <img
            :src="row.user && row.user.cert"
            style="max-width: 40px; max-height: 40px"
            @click="lookPhoto(row.user.cert)"
          />
        </a-space>
        <a-space slot="action" slot-scope="row">
          <a
            @click="
              (visible = true), (visibleData = JSON.parse(JSON.stringify(row)))
            "
            >维护信息</a
          >
        </a-space>
      </a-table>
    </div>

    <!-- 分页 -->
    <a-pagination
      class="pagination"
      show-quick-jumper
      :default-current="current_page"
      :total="total"
      @change="changePages"
    />

    <!-- 维护信息 -->
    <a-modal
      title="维护信息"
      :visible="visible"
      @ok="handleOk"
      @cancel="(visible = false), (visibleData = {})"
    >
      <p>以下是您可以维护的信息内容：</p>
      <p>
        <a-row>
          <a-col :span="6">企业头像：</a-col>
          <a-col :span="18">
            <a-upload
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="Util.getUploadImagePath()"
              :before-upload="beforeUpload"
              @change="handleChange"
            >
              <img
                v-if="visibleData.image"
                :src="visibleData.image"
                alt="avatar"
                style="width: 80px; height: 80px"
              />
              <span v-else>
                <a-icon type="plus" />
                <span class="ant-upload-text"> Upload </span>
              </span>
            </a-upload>
          </a-col>
        </a-row>
      </p>
      <p>
        <a-row>
          <a-col :span="6">营业执照：</a-col>
          <a-col :span="18">
            <a-upload
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="Util.getUploadImagePath()"
              :before-upload="beforeUpload"
              @change="handleChangeCertImage"
            >
              <img
                v-if="visibleData.certImage"
                :src="visibleData.certImage"
                alt="avatar"
                style="width: 80px; height: 80px"
              />
              <span v-else>
                <a-icon type="plus" />
                <span class="ant-upload-text"> Upload </span>
              </span>
            </a-upload>
          </a-col>
        </a-row>
      </p>
      <p>
        <a-row>
          <a-col :span="6">人力资源许可证：</a-col>
          <a-col :span="18">
            <a-upload
              name="file"
              list-type="picture-card"
              class="avatar-uploader"
              :show-upload-list="false"
              :action="Util.getUploadImagePath()"
              :before-upload="beforeUpload"
              @change="handleChangeCert"
            >
              <img
                v-if="visibleData.user && visibleData.user.cert"
                :src="visibleData.user.cert"
                alt="avatar"
                style="width: 80px; height: 80px"
              />
              <span v-else>
                <a-icon type="plus" />
                <span class="ant-upload-text"> Upload </span>
              </span>
            </a-upload>
          </a-col>
        </a-row>
      </p>
      <p>
        <a-row>
          <a-col :span="6">企业简介：</a-col>
          <a-col :span="18">
            <a-input v-model="visibleData.desc"></a-input>
          </a-col>
        </a-row>
      </p>
      <p>
        <a-row>
          <a-col :span="6">企业规模：</a-col>
          <a-col :span="18">
            <a-input v-model="visibleData.peopleNum"></a-input>
          </a-col>
        </a-row>
      </p>
      <p>
        <a-row>
          <a-col :span="6">注册时间：</a-col>
          <a-col :span="18">
            <a-input v-model="visibleData.start"></a-input>
          </a-col>
        </a-row>
      </p>
      <p>
        <a-row>
          <a-col :span="6">主页：</a-col>
          <a-col :span="18">
            <a-input v-model="visibleData.url"></a-input>
          </a-col>
        </a-row>
      </p>
      <p>
        <a-row>
          <a-col :span="6">统一社会信用代码：</a-col>
          <a-col :span="18">
            <a-input v-model="visibleData.num"></a-input>
          </a-col>
        </a-row>
      </p>
      <p>
        <a-row>
          <a-col :span="6">经营状态：</a-col>
          <a-col :span="18">
            <a-input v-model="visibleData.workState"></a-input>
          </a-col>
        </a-row>
      </p>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  { title: "ID", dataIndex: "id" },
  { title: "公司全称", dataIndex: "title" },
  { title: "简称", dataIndex: "shortTitle" },
  { title: "头像", scopedSlots: { customRender: "avater" } },
  { title: "营业执照", scopedSlots: { customRender: "certImage" } },
  { title: "人力资源许可证", scopedSlots: { customRender: "cert" } },
  { title: "公司简介", dataIndex: "desc" },
  { title: "公司规模", dataIndex: "peopleNum" },
  { title: "注册时间", dataIndex: "start" },
  { title: "主页", dataIndex: "url" },
  { title: "统一社会信用代码", dataIndex: "num" },
  { title: "经营状态", dataIndex: "workState" },
  { title: "操作", scopedSlots: { customRender: "action" } },
];

import config from "../../tools/config";

export default {
  name: "List.vue",
  data() {
    return {
      visible: false,
      visibleData: {},
      // 公用配置
      Config: {},
      // 分页数据
      current_page: 1,
      total: 100,
      // table数据
      tableLoading: false,
      columns,
      data: [],
      // 搜索表单
      form: this.$form.createForm(this),
      // other
      UserStateList: [],
      defaultValue: 1,
    };
  },
  created() {
    const _this = this;
    this.Config = config;
    setTimeout(() => {
      _this.getData();
    }, 0);
  },
  methods: {
    /**
     * 进行搜索
     * @param e
     */
    getSearch(e) {
      e.preventDefault();
      this.form.validateFields((error) => {
        if (!error) {
          this.getData(1);
        }
      });
    },

    /**
     * 请求Table数据
     * @param pages
     */
    getData(pages = 1) {
      this.tableLoading = true;
      this.Http.get("/admin/supplier/getAll", {
        page: pages,
        type: 1,
        ...this.form.getFieldsValue(),
      })
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 1) {
            this.data = res.data.data;
            this.current_page = res.data.current_page;
            this.total = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    /**
     * 切换分页时
     * @param event
     */
    changePages(event) {
      this.getData(event);
    },

    /**
     * 清空搜索项
     */
    handleReset() {
      this.form.resetFields();
      this.getData();
    },
    lookPhoto(src) {
      this.Util.lookPhoto(src);
    },

    add() {
      this.$router.push("/Home/User/SupplierDetail");
    },

    handleOk() {
      if (
        !this.visibleData.peopleNum ||
        !this.visibleData.start ||
        !this.visibleData.image
      ) {
        this.$message.error("请将信息填写完整");
        return;
      }
      this.Http.post("/admin/supplier/update", {
        id: this.visibleData.id,
        desc: this.visibleData.desc || "",
        title: this.visibleData.title,
        start: this.visibleData.start,
        peopleNum: this.visibleData.peopleNum,
        url: this.visibleData.url,
        num: this.visibleData.num,
        workState: this.visibleData.workState,
        type: this.visibleData.type,
        image: this.visibleData.image,
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.getData(this.current_page);
          this.visibleData = {};
          this.visible = false;
        } else {
          this.$message.error(res.msg);
        }
      });
    },

    // 上传
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.uploadLoading = true;
        return;
      }
      if (info.file.status === "done") {
        this.visibleData.image = info.fileList[0].response.data.path;
      }
    },
    handleChangeCertImage(info) {
      if (info.file.status === "uploading") {
        this.uploadLoading = true;
        return;
      }
      if (info.file.status === "done") {
        this.visibleData.certImage = info.fileList[0].response.data.path;
      }
    },
    handleChangeCert(info) {
      if (info.file.status === "uploading") {
        this.uploadLoading = true;
        return;
      }
      if (info.file.status === "done") {
        this.visibleData.user.cert = info.fileList[0].response.data.path;
      }
    },

    // 上传前检测格式和大小
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
  },
};
</script>

<style scoped>
</style>
